<template>
  <div class="content-div">
    <div class="head-bg"></div>
    <div class="head-box">
      <img src="@/assets/images/mk-lc1.png" alt="" srcset="">
      <div class="head-text-box">
        <span>发起需求</span>
        <span>在线支付</span>
        <span>服务中</span>
        <span>完工评价</span>
      </div>
    </div>
    <div class="login-win">
      <van-form @submit="onSubmit" input-align="right">
        <van-field
          class="login-input"
          v-model="form.name"
          label="就诊人姓名"
          readonly
          right-icon="arrow"
          placeholder="请选择就诊人"
          @click="checkVisitor('patientList')"
          :rules="[{ required: true, message: '请输入就诊人姓名' }]"
        />
        <!-- <van-field
          class="login-input"
          label="就诊人性别"
          :rules="[{ required: true, message: '请选择就诊人性别' }]">
          <template #input>
            <van-radio-group v-model="form.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field> -->
        <!-- <van-field
          readonly
          clickable
          class="login-input"
          v-model="form.date"
          label="出生日期"
          placeholder="请选择出生日期"
          @click="showPicker=true"
          :rules="[{ required: true, message: '请选择出生日期' }]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            v-model="bdDate"
            type="date"
            title="出生日期"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="showPicker=false"
            @confirm="selectDate"
          />
        </van-popup> -->
        <!-- <van-field
          class="login-input"
          v-model="form.phone"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        /> -->
        <van-field
          class="login-input"
          v-model="form.hospital_name"
          label="医院"
          readonly
          right-icon="arrow"
          @click="getHospitalData()"
          placeholder="请选择医院"
          :rules="[{ required: true, message: '请输入医院' }]"
        />
        <van-popup v-model="yyShowPicker" position="bottom">
          <van-picker
            title="医院"
            show-toolbar
            :columns="yyColumns"
            value-key="hospital_name"
            @confirm="yyOnConfirm"
            @cancel="onYyCancel"
          />
        </van-popup>
        <van-field
          class="login-input"
          v-model="form.department_name"
          label="科室"
          right-icon="arrow"
          @click="getDepartmentData()"
          placeholder="请选择科室"
          :rules="[{ required: true, message: '请选择科室' }]"
        />
        <van-popup v-model="ksShowPicker" position="bottom">
          <van-picker
            title="标题"
            show-toolbar
            :columns="ksColumns"
            value-key="department_name"
            @confirm="ksOnConfirm"
            @cancel="onKsCancel"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          class="login-input"
          right-icon="arrow"
          v-model="form.expected_time"
          label="期待服务时间"
          placeholder="请选择期待服务时间"
          @click="fwShowPicker=true"
          :rules="[{ required: true, message: '请选择期待服务时间' }]"
        />
        <van-popup v-model="fwShowPicker" position="bottom">
          <van-datetime-picker
            v-model="fwDate"
            type="datetime"
            title="期待服务时间"
            :min-date="fwMinDate"
            :max-date="fwMaxDate"
            @cancel="fwShowPicker=false"
            @confirm="selectfwDate"
          />
        </van-popup>
        <van-field
          class="login-input"
          readonly
          v-model="form.give_service_name"
          label="服务名称"
          right-icon="arrow"
          @click="getServiceData()"
          placeholder="请选择服务名称"
          :rules="[{ required: true, message: '请选择服务名称' }]"
        />
         <van-popup v-model="fnShowPicker" position="bottom">
          <van-picker
            title="服务名称"
            show-toolbar
            :columns="fnColumns"
            value-key="give_service_name"
            @confirm="fnOnConfirm"
            @cancel="onFnCancel"
          />
        </van-popup>
        <van-field
          v-if="!queryInfo.give_service_id"
          class="login-input"
          readonly
          v-model="form.payable_amount"
          label="服务金额"
          @click="getServiceData()"
          placeholder="服务金额"
          :rules="[{ required: true, message: '请选择服务名称' }]"
        />
        <van-field
          class="login-input"
          v-model="form.note"
          rows="2"
          autosize
          type="textarea"
          maxlength="200"
          label="服务描述"
          placeholder="请输入服务描述"
        />
        <div class="policy-box">
          <van-checkbox v-model="checked"></van-checkbox>
          <span>我已认真阅读相关预约</span>
          <span @click="toPage('/policyIn', {pageType: '1'})">《服务条款同意书》</span>
        </div>
        <van-button class="login-btn" round block type="info" native-type="submit">保存</van-button>
      </van-form>
    </div>
    <div class="login-win">
      <span style="color: #FF0000;">注意事项：此服务仅为陪诊业务，不包含挂号业务；如有任何问题，请及时联系客服或接单人。</span>
    </div>
  </div>
</template>
<script>
import { findDepartmentList, getTime, saveOrderGoods, selectHospitalList, findGiveServiceList } from '@/api/medical.js'
import { Toast } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      form: {
        name: ''
      },
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2050, 10, 1),
      fwMinDate: new Date(),
      fwMaxDate: new Date(2050, 10, 1),
      showPicker: false,
      ksShowPicker: false,
      fwShowPicker: false,
      yyShowPicker: false,
      bdDate: null,
      fwDate: '',
      checked: false,
      queryInfo: this.$route.query,
      ksColumns: [],
      yyColumns: [],
      fnColumns: [],
      fnShowPicker: false
    }
  },
  created () {},
  methods: {
    toPage (url, query) {
      this.$router.push({
        path: url,
        query: query
      })
    },
    selectDate () {
      this.form.date = this.bdDate.getFullYear() + '-' + ((this.bdDate.getMonth() + 1) < 10 ? ('0' + (this.bdDate.getMonth() + 1)) : (this.bdDate.getMonth() + 1)) + '-' + (this.bdDate.getDate() < 10 ? ('0' + this.bdDate.getDate()) : this.bdDate.getDate())
      this.showPicker = false
    },
    onSubmit (value) {
      console.log(value, this.form, '入参')
      if (this.checked === false) {
        Toast.fail('请勾选我已阅读相关预约《服务条款同意书》')
        return
      }
      this.form.province = this.$store.state.app.city.province_code
      this.form.city = this.$store.state.app.city.city_code
      console.log(this.form)
      saveOrderGoods(this.form).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('预约成功')
          if (this.$route.query.give_service_id) {
            this.$router.push({
              path: '/order'
            })
          } else {
            this.$router.push({
              path: '/productPayment',
              query: {
                give_service_price: this.form.give_service_price,
                hospital_name: this.form.hospital_name,
                give_service_name: this.form.give_service_name,
                date: this.form.expected_time
              }
            })
          }
        }
      })
    },
    checkVisitor (url, query) { // 选择就诊人跳转到就诊人列表页面,把整个浏览器带过来数据都传到下一页面
      this.$router.push({
        path: url,
        query: this.$route.query
      })
    },
    onKsChange () { // 选择科室
    },
    getHospitalData () {
      if (!this.queryInfo.hospital_id) {
        this.yyShowPicker = true
        selectHospitalList({
          province: this.$store.state.app.city.province_code,
          city: this.$store.state.app.city.city_code
        }).then(res => {
          if (res.data.errcode === 0) {
            this.yyColumns = res.data.data
          }
        })
      }
    },
    yyOnConfirm (value) {
      this.form.hospital_id = value.hospital_id
      this.form.hospital_name = value.hospital_name
      this.yyShowPicker = false
    },
    onYyCancel () {
      this.yyShowPicker = false
    },
    getDepartmentData () { // 获取科室数据
      this.ksShowPicker = true
      findDepartmentList({ hospital_id: this.form.hospital_id }).then(res => {
        if (res.data.errcode === 0) {
          this.ksColumns = res.data.data
        }
      })
    },
    ksOnConfirm (value) {
      this.form.department_id = value.id
      this.form.department_name = value.department_name
      this.ksShowPicker = false
    },
    onKsCancel () {
      this.ksShowPicker = false
    },
    getServiceData () {
      if (!this.queryInfo.give_service_id) {
        this.fnShowPicker = true
        findGiveServiceList({ hospital_id: this.form.hospital_id }).then(res => {
          if (res.data.errcode === 0) {
            this.fnColumns = res.data.data
          }
        })
      }
    },
    fnOnConfirm (value) {
      this.fnShowPicker = false
      this.form.give_service_id = value.give_service_id
      this.form.give_service_name = value.give_service_name
      this.form.give_service_price = value.give_service_price
      this.form.payable_amount = value.give_service_price
    },
    onFnCancel () {
      this.fnShowPicker = false
    },
    selectfwDate () { // 确定选择服务时间
      this.form.expected_time = getTime(this.fwDate)
      this.fwShowPicker = false
    }
  },
  mounted () {
    console.log(this.$store.state)
    this.form.name = this.$route.query.visitor_name
    this.form.hospital_name = this.$route.query.hospital_name
    this.form.member_id = this.$store.state.user.severUserInfo.member_id
    this.form.visitor_id = this.$route.query.visitor_id
    this.form.give_service_id = this.$route.query.give_service_id
    this.form.hospital_id = this.$route.query.hospital_id
    this.form.payable_amount = this.$route.query.payable_amount
    this.form.give_service_name = this.$route.query.give_service_name
    if (this.$route.query.give_service_describe) {
      this.form.note = this.$route.query.give_service_describe
    }
  }
}
</script>

<style scoped lang="less">
  .content-div{
    width: 100%;
    height: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-size: 12px;
    position: relative;
    .head-bg{
      position: absolute;
      width: 100%;
      height: 80px;
      background-color: #1989fa;
      left: 0;
      top: -10px;
    }
    .head-box{
      position: relative;
      z-index: 1;
      background-color: #FFFFFF;
      width: 300px;
      margin: 30px auto 10px;
      border-radius: 6px;
      box-sizing: border-box;
      padding: 10px;
      text-align: center;
      img{
        width: 90%;
        vertical-align: middle;
      }
      .head-text-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        span{
          flex: 1;
          text-align: center;
        }
      }
    }
    .login-win{
      width: 300px;
      margin: 0 auto 10px;
      background-color: #FFFFFF;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
      .login-input{
        padding: 10px 4px;
      }
      /deep/.van-cell::after{
        left: 0;
        right: 0;
      }
      .login-btn{
        margin-top: 14px;
        height: 34px;
        line-height: 34px;
        border-radius: 10px;
      }
      /deep/.van-field__control, /deep/.van-field__error-message{
        font-size: 12px;
      }
      /deep/.van-field__error-message{
        display: none;
      }
      /deep/ .van-field__label{
        font-size: 12px;
      }
      // /deep/.van-cell::after{
      //   display: none;
      // }
      /deep/ .van-radio{
        margin-right: 0;
        margin-left: 10px;
      }
      .policy-box{
        padding-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        span{
          padding-left: 6px;
        }
        span:last-child{
          color: #1989fa;
        }
      }
    }
  }
</style>
